<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="sel">
          <span class="iconfont icon-fenlei"></span>
        </div>

        <div class="logo">
          <div class="img">
            <img
              width="45%"
              src="https://res.vmallres.com/pimages//sale/2018-11/WTDdguIWgNsNWtK0Q1Z3.png"
              alt
            />
            <span class="solid"></span>
            <img
              width="50%"
              src="https://res.vmallres.com/pimages//sale/2018-11/dwf3xhEW9pVxGdlNeUIL.png"
              alt
            />
          </div>
        </div>
        <div class="nav">
          <span>手机</span>
          <span>笔记本电脑</span>
          <span>平板&穿戴</span>
          <span>智能家居</span>
          <span>配件</span>
          <span>企业购</span>
        </div>

        <div>
          <span @click="onCart" class="iconfont icon-gouwuche"></span>
        </div>
      </el-header>
      <el-main>
        <div class="home_swiper">
          <el-carousel class="pcswiper" height="500px">
            <el-carousel-item v-for="(item,index) in list.pcSwiper" :key="index">
              <img width="100%" height="500px" :src="item.img" alt />
            </el-carousel-item>
          </el-carousel>

          <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="(item,index) in list.swiper" :key="index">
                <img width="100%" :src="item.img" alt />
              </van-swipe-item>
            </van-swipe>
          </div>

          <div class="swiper_title">
            <span>热销爆款</span>
            <span>|</span>
            <span>爆款手机</span>
            <span>|</span>
            <span>智能家居</span>
            <span>|</span>
            <span>智能穿戴</span>
            <span>|</span>
            <span>潮流配件</span>
          </div>
        </div>

        <div class="home_bg">
          <img
            width="100%"
            src="https://res6.vmallres.com/shopdc/pic/237f2242-c84c-43db-8864-4836a1906243.jpg"
            alt
          />
        </div>

        <div class="diver">
          <img
            src="https://res6.vmallres.com/shopdc/pic/f61c597b-cae9-4c49-b643-7875062cc823.jpg"
            alt
          />
        </div>

        <div class="home_list">
          <el-row :gutter="10">
            <el-col
              :xs="24"
              :sm="8"
              :md="6"
              :lg="4"
              :xl="2"
              v-for="(item,index) in list.good"
              :key="index"
            >
              <div class="grid-content bg-purple">
                <img width="100%" :src="item.img" alt />
                <div class="home_card">
                  <p class="home_card_title">{{item.title}}</p>
                  <p class="home_card_name">{{item.content}}</p>
                  <p class="home_card_price">￥{{item.price}}.00</p>
                  <p class="home_card_add" @click="addcart(item)">加入购物车</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$store.dispatch("getData");
  },
  computed: {
    list: function() {
      return this.$store.state.list;
    }
  },
  methods: {
    addcart(item) {
      this.$store.dispatch("addcart", item);
    },
    onCart() {
      this.$router.push("Cart");
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.home {
  width: 100%;
}
.sel {
  display: none;
}
.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
}
.el-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.icon-gouwuche {
  font-size: 30px;
  cursor: pointer;
}
.swiper {
  display: none;
}
.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  color: #333;
}
.logo {
  width: 18%;
  margin-right: 5px;
  height: 36px;
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.solid {
  display: inline-block;
  width: 1px;
  height: 18px;
  margin: 9px 8px;
  background: #030000;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.nav span {
  /* display: inline-block; */
  padding: 6px 8px;
}
.nav span:hover {
  color: #ca141d;
  border-bottom: 2px solid #ca141d;
}
.home_swiper {
  width: 100%;
  margin-top: 10px;
  background-color: #efefef;
}
.el-carousel {
  width: 100%;
}
.swiper_title {
  width: 80%;
  height: 66px;
  margin: 10px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.swiper_title span {
  font-size: 22px;
  color: #000;
}
.home_bg {
  width: 100%;
  margin: 10px auto;
}
.diver {
  width: 100%;
  margin: 0px auto;
}
.diver img {
  width: 100%;
}
.home_list {
  width: 90%;
  margin: 0px auto;
  background-color: #efefef;
}
.el-row {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  align-items: center;
}
.el-col {
  box-sizing: border-box;
  padding: 1px;
  background-color: #fff;
}
.grid-content {
  width: 100%;
}
.home_card {
  width: 100%;
  box-sizing: border-box;
  padding: 1px;
}
.home_card_add {
  color: red;
  line-height: 35px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid red;
  cursor: pointer;
}
.home_card_price {
  color: red;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 22px;
}
.home_card_title {
  font-size: 22px;
  font-weight: 550;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.home_card_name {
  font-size: 16px;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .nav {
    display: none;
  }
  .logo {
    width: 60%;
    /* display: flex; */
    /* justify-content: space-around; */
    /* box-sizing: border-box; */
    /* padding: 2px; */
  }
  .img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
  }
  .img img {
    width: 40%;
  }
  .sel {
    display: block;
  }
  .el-header {
    width: 100%;
    justify-content: space-around;
  }
  .icon-fenlei {
    font-size: 20px;
  }
  .icon-gouwuche {
    font-size: 30px;
  }
  .swiper {
    display: block;
  }
  .swiper img {
    width: 100%;
  }
  .pcswiper {
    display: none;
  }
  .swiper_title {
    display: none;
  }
}
</style>